<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 300px;
            height: 300px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;


        }

        ul>li {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid rgb(226, 174, 174);
        }

        .lis1 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li class="lis">笨蛋</li>
        <li class="lis">大笨蛋</li>
        <li class="lis">胖妞</li>
        <li class="lis">丑女</li>
        <li class="lis1">王燕是?</li>
        <li class="lis">美女</li>
        <li class="lis">富婆</li>
        <li class="lis">神经病</li>
        <li class="lis">脑残</li>
    </ul>

    <script>
        const lis = document.querySelectorAll('.lis')
        const btn = document.querySelector('.lis1')

        let num = 0
        let kai = null
        // 绑定点击事件绑定
        btn.onclick = function () {

            // 给定时器添加开关
            if (kai == null) {
                kai = setInterval(() => {
                    num++
                    console.log(num);
                    //   获取随机数
                    let ran = Math.floor(Math.random() * (8 - 0))

                    //  选中之前,先给每一项删除样式
                    for (let i = 0; i < lis.length; i++) {
                        lis[i].style.backgroundColor = ''
                        lis[i].style.color = ''
                    }

                    //   给选中元素 添加样式
                    lis[ran].style.backgroundColor = 'red'
                    lis[ran].style.color = '#fff'

                    // 关闭计时器,将开关重新设置为null,将num重新设置为0
                    if (num >= 30) {
                        clearInterval(kai)
                        kai = null;
                        num = 0
                    }
                    
                }, 100)
            }



        }
    </script>
</body>

</html>